<template>
    <div>
      <div :class="$style.calendar_wrap">
        <calendar
          @leftMenuClick = 'popupVisible=true'
          @rightMenuClick = '$_showSearch'
          @selectDate = '$selectDate'
        ></calendar>
        <v-search-bar @resultSelect = 'resultSelect' :taskType= 'taskType' :isShow.sync="isShowSearchBar"></v-search-bar>
      </div>
      <mt-popup
        v-model="popupVisible"
        position="left"
      >
        <slide-bar @handleItemClick = '$_slide_handleItemClick' :items="menus" />
      </mt-popup>
      <div  :class="[ isShowSearchBar ? $style.progressWrapSearch : $style.progressWrap ]">
        <v-progress-bar v-if='progressData.length' @contentClick="$skipToDetail" :progressData="progressData" ></v-progress-bar>
        <v-no-data style='padding-top: 100px' v-else :type='0' />
      </div>

      <v-plus-btn :class="$style.plus_btn_container" @click="$_skipToAdd" ></v-plus-btn>
      <div v-if="hasMore" class="text-center c_placeholder c_white-bg ptb20" >
        加载中...
      </div>
      <div v-else class="text-center c_placeholder c_white-bg ptb20" >
        主人，这已经是我的底线了
      </div>

    </div>
</template>
<script type="text/babel">
    import Vue from 'vue'
    // util components
    import { Popup, Indicator  } from 'mint-ui';
    Vue.component(Popup.name, Popup);
    // pages components
    import SlideBar from '@/components/slideBar/SlideBar.vue'
    import Calendar from './components/calendar'
    import { dateFormat12rule, dateFormat12ruleLong } from '@/util/transform'
    export default {
        name: "index",
        data() {
            return {
              popupVisible : false ,
              menus : [
                {
                  leftIcon : 'zidingyicaidan' ,
                  leftSize : '36' ,
                  content : 'All Task' ,
                  type : 'all',
                  link: '/task/category?type=all'
                },
                {
                  leftIcon : 'shizhong' ,
                  leftSize : '40' ,
                  content : 'Nearest Task' ,
                  type : 'nearest',
                  link: '/task/category?type=nearest'
                },
                {
                  leftIcon : 'right' ,
                  leftSize : '32' ,
                  content : 'Complete Task' ,
                  type : 'complete',
                  link: '/task/category?type=complete'
                },
                {
                  leftIcon : 'jinri' ,
                  leftSize : '40' ,
                  content : 'Today Task' ,
                  type : 'today',
                  link: '/task/category?type=today'
                },
                {
                  leftIcon : 'shezhi1' ,
                  leftSize : '40' ,
                  content : 'System Settings' ,
                  type : 'setting',
                  link: '/task/settings'
                },
                {
                  leftIcon : 'custom-help' ,
                  leftSize : '40' ,
                  content : 'Help Center' ,
                  type : 'help',
                  link : '/task/help'
                },
              ],
              progressData : [],
              isShowSearchBar : false ,
              taskType : 'all' ,
              currentDate : '' ,
              page:{
                pageSize: 10,
                pageNum : 1,
                lastValue : 0
              },
              hasMore :true
            }
        },
        components:{
          SlideBar, Calendar
        },
        created() {
        },
        mounted() {
          this.$_getTaskList('all')
          document.addEventListener('scroll',this.$isToBottom)
        },
        beforeDestroy() {
          // 去除滚动加载监控
          document.removeEventListener('scroll', this.$isToBottom)
        },
        computed: {},
        methods: {
          // 滚动加载
          $isToBottom(e){
            const BodyEl = document.documentElement
            const Body = document.body
            let outH = Body.scrollHeight,
              currentH = BodyEl.offsetHeight,
              offH = Body.scrollTop > BodyEl.scrollTop ? Body.scrollTop : BodyEl.scrollTop
            if(currentH + offH == outH && this.hasMore ){
              this.$_getTaskList()
            }
            else{
              return false
            }
          },
          $_skipToAdd(){
            this.$router.push('/task/detail')
          },
          $_showSearch(){
            this.isShowSearchBar = true
          },
          $skipToDetail( index ){
            const cDetail =  this.progressData[index]
            this.$router.push(`/task/Detail?taskId=${cDetail.taskId}`)
          },
          // 侧边栏菜单选择
          $_slide_handleItemClick(type){
            /*if( type == this.taskType){
              this.popupVisible = false
              return
            }*/
            this.$router.push('/task/category?taskType=' + type)
            return
            this.popupVisible = false
            this.taskType = type
            this.page = {    // reset pages
              pageSize: 10,
              pageNum : 1
            }
            this.progressData = [] // clear
            this.currentDate = ''
            this.$_getTaskList(type) // get task list from conditions
          },
          async $_getTaskList (taskType){
            if( !this.hasMore ){
              return
            }
            this.hasMore = false
            let params = {
              ...this.page
            }
            if( this.currentDate ){
              params.date = this.currentDate
            }
            else{
              params.taskType = taskType || this.taskType
            }
            let res = await this.$get('/api/task/list', params)
            if( res.data.length ) {
              // pages data deal with array.concat
              this.progressData = this.progressData.concat(this.mapTask(res.data))
              this.page.lastValue = res.lastValue
              this.page.pageNum += 1
              this.hasMore = res.hasMore
            }
            else{
              this.hasMore = false
            }

          },
          mapTask(data) {
            return data.map((task)=>{
              task.themeTitle = task.title
              task.grade = Number(task.grade)
              task.taskId = task._id
              // 时间转格式
              task.date = dateFormat12ruleLong( new Date( task.arrivalTime  ))
              delete task._id
              return task
            })
          },
          resultSelect(item){
            this.$router.push(`/task/detail?taskId=${item._id}`)
          },
          $selectDate(date){
            console.log(date)
            if( date == this.currentDate ){
              return
            }
            this.page = {    // reset pages
              pageSize: 10,
              pageNum : 1
            }
            this.currentDate = date
            this.progressData = []
            this.hasMore = true
            this.$_getTaskList()
          }
        }
    }
</script>
<style module lang='scss'>
  .plus_btn_container{
    position: fixed;
    margin: auto;
    left: 50% ;
    transform: translateX(-50%);
    bottom : 70px ;
  }
  .calendar_wrap{
    position: fixed ;
    top: 0 ;
    left: 0;
    z-index: 1;
  }
  .progressWrap{
    padding-top: 185px;
    position: relative;
    z-index: 0;
  }
  .progressWrapSearch{
    padding-top: 271px;
    position: relative;
    z-index: 0;
  }
</style>
